<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/taglibs.jsp"%>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<%String theme=request.getParameter("topthemeName"); if(theme==null){theme="default";}%>
<link id="easyuiTheme" rel="stylesheet" href="${ctx}/plug/jquery-easyui-1.3.3/themes/<%=theme%>/easyui.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/plug/easyui-icons/icon-all.css" />
<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${ctx}/plug/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/plug/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/js/extend/extend.js"></script>
<script type="text/javascript" src="${ctx}/js/core.js"></script>
<style type="text/css">
 h3 { margin-bottom:10px; height:22px; line-height:22px;}
 h3 span { font-family:"微软雅黑"; font-size:16px; color:#333;}
 h3 ul { padding-left:28px; display:inline-block; height:auto; overflow:hidden;}
 h3 li { float:left; margin-left:22px; display:block; height:18px; line-height:18px; color:#888; text-indent:30px;}
 h3 li.img01 { background:url(../images/process-01.png) no-repeat 0 0;}
 h3 li.img02 { background:url(../images/process-02.png) no-repeat 0 0;}
 h3 li.img03 { background:url(../images/process-03.png) no-repeat 0 0;}

</style>
<script>
var syFlowId="i_sy_syFlowTaskInfo_datagrid";
var syFlowDt;
var p='';
$(function(){
	var urls=window.location.href.split('?');
	if(urls.length>1){p=urls[1]}
	data(getUrl('syFlow','Get_TaskDetailInfo')+'?'+p,'','json',wbuild);
	$('#flowImg img').attr('src',getUrl('syFlow','Get_FlowImage')+'?'+p);
	var syFlowDataGrid = {
			id:syFlowId,
			url:"${ctx}"+actionUrl('/sys/','syFlow','Get_TaskDetailInfoList')+"?"+p,
			dId:'id',
			columns:columns,
			pagination:false
	};
	syFlowDt=gGrid2(syFlowDataGrid);	
});

var columns= [ [{
	field : 'nodeName',
	title : '步骤名称',
	width : 150
}, {
	field : 'createTime',
	title : '到达时间',
	width : 150
}, {
	field : 'endTime',
	title : '结束时间',
	width : 150
},{
	field : 'assgneeUserName',
	title : '处理者',
	width : 150
},{
	field : 'commandMessage',
	title : '处理结果',
	width : 150,
	formatter : function(value, row, index) {
		if(value){
			return value.split('%')[0];
		}
	}
}   ] ];

function wbuild(d){
	if(d){
		initFlowInfo(d);
		getGraphiNew(d);
		markSvg();
	}
}


var taskListEnd = [];//存放已经结束的节点
var taskListIng = [];//存放正在处理的节点
var noPostion = 0;
//初始化已完成和未完成的节点信息。
function initFlowInfo(d){
	var taskEnded = d.taskEndedJson;
	var taskIng = d.taskNotEndJson;
	taskListEnd = $.parseJSON(taskEnded);
	taskListIng = $.parseJSON(taskIng);
	
}
//给流程图加坐标
function getGraphiNew(d) {
    var divcontent="";
    var nodeInfoArr = $.parseJSON(d.positionInfo);
	for(var nodeInfo in nodeInfoArr){
		var nodeInfoObj=nodeInfoArr[nodeInfo];
		divcontent=divcontent+getDiv(nodeInfo,nodeInfoObj.x-4,nodeInfoObj.y-4,nodeInfoObj.width+4,nodeInfoObj.height+4);
	}
	$("#flowImg").append(divcontent);
}

//获取图标的div
function getDiv(nodeId,x,y,w,h){
	//x+=25;//修复无法显示的bug
	return "<DIV id='"+nodeId+"' class='nodeclass' style='display:none;position:  absolute; left: "+x+"px; top: "+y+"px;WIDTH:"+w+"px;HEIGHT:"+h+"px'  ></DIV>";
}

//标记节点
function markSvg(){
	$.each(taskListEnd, function(i, task) {
		markImg(task.nodeId, "green", 2,0);
	});
	$.each(taskListIng, function(i, task) {
		if(task.taskType=="FIXCALLACTIVITYTASK"){
			//如果是正在运行的，则将z-idnex设为最大，因为子流程如果折叠起来，会有重叠的DIV
			markImg(task.nodeId, "#ff6000", 4,999);
		}
		else{
			markImg(task.nodeId, "#ff6000", 2,999);
		}
	});
}

//标记单个节点
function markImg(svgNodeId, color, width,zIndex) {
	var svgElement = $("#"+svgNodeId);
	if (svgElement) {
		svgElement.css('display','block');
		svgElement.css('border','2px solid '+color);
		svgElement.css('z-index',zIndex);
	}
}

function viewPostion(){
	if(noPostion == 0){
		$(".nodeclass").css('display','none');
		noPostion = 1;
	}else{
		markSvg();
		noPostion = 0;
	}
}
</script>
</head>
<body class="easyui-layout"  data-options="fit:true">
<div data-options="region:'north',title:'流程信息',split:true" style="width:500px;height:250px">
<div id="i_sy_syFlowTaskInfo_datagrid_toolbar"
		style="padding: 2px 0">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="padding-left: 2px"
					id="i_sy_syFlowTaskInfo_datagrid_toolbtn"></td>
				<td style="text-align: right; padding-right: 2px"><input
					class="easyui-searchbox" data-options="prompt:'请输入搜索关键词'"
					style="width: 200px" searcher="dSearch"
					id="i_sy_syFlowTaskInfo_datagrid_searchbox"
					pdt="i_sy_syFlowTaskInfo_datagrid_datagrid"></input>
					<div id="i_sy_syFlowTaskInfo_datagrid_dSComb"
						style="width: 120px"></div></td>
			</tr>
		</table>
	</div>
 <table  id="i_sy_syFlowTaskInfo_datagrid"></table> 
 </div>
 <div data-options="region:'center',title:'流程图'" >
 <div>
				<h3>
					<ul>
						<li class="img01">已完成</li>
						<li class="img02">进行中</li>
						<li><input id="yczt" type="checkbox" name="cczt" onclick="viewPostion()" />&nbsp;&nbsp;隐藏状态</li>
					</ul>
				</h3>
				</div>
				<!---流程图 START--->
				<div id="flowImg" style='position: relative;margin:0;padding:0'>
						<img src=""/>
				</div>
			</div>	
</body>
</html>
	